<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>Picture-in-Picture</title>
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css">
  <link href="https://w3c.github.io/picture-in-picture" rel="canonical">
  <link href="https://raw.githubusercontent.com/google/material-design-icons/master/action/2x_web/ic_picture_in_picture_alt_black_48dp.png" rel="icon">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">Picture-in-Picture</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://w3c.github.io/picture-in-picture">https://w3c.github.io/picture-in-picture</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="81174"><a class="p-name fn u-email email" href="mailto:fbeaufort@google.com">François Beaufort</a> (<a class="p-org org" href="https://www.google.com">Google LLC</a>)
     <dd class="editor p-author h-card vcard" data-editor-id="45389"><a class="p-name fn u-email email" href="mailto:mlamouri@google.com">Mounir Lamouri</a> (<a class="p-org org" href="https://www.google.com">Google LLC</a>)
     <dt>Web Platform Tests:
     <dd><a href="https://github.com/web-platform-tests/wpt/tree/master/feature-policy">feature-policy/</a><br><a href="https://github.com/web-platform-tests/wpt/tree/master/picture-in-picture">picture-in-picture/</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" rel="license">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification intends to provide APIs to allow websites to

create a floating video window always on top of other windows so that
users may continue consuming media while they interact with other
content sites, or applications on their device.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> <em>This section describes the status of this document at the time of its publication. Other
    documents may supersede this document. A list of current <abbr title="World Wide Web Consortium">W3C</abbr> publications and the latest revision of this
    technical report can be found in the <a href="http://www.w3.org/TR/"><abbr title="World Wide Web Consortium">W3C</abbr> technical
    reports index</a> at http://www.w3.org/TR/.</em> </p>
   <p> This document was published by the <a href="https://www.w3.org/media-wg/">Media Working Group</a> as an Editors' Draft. This document is intended to become a W3C Recommendation.

    Feedback and comments on this specification are welcome. Please use <a href="https://github.com/w3c/picture-in-picture/issues">Github issues</a>.
    Discussions may also be found in the <a href="http://lists.w3.org/Archives/Public/public-media-wg/">public-media-wg@w3.org archives</a>. </p>
   <p> Publication as an Editors' Draft does not imply endorsement by the <abbr title="World Wide Web Consortium">W3C</abbr> Membership. This is a draft document and may
    be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite
    this document as other than work in progress. </p>
   <p> This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy/"> <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. <abbr title="World Wide Web Consortium">W3C</abbr> maintains a <a href="https://www.w3.org/2004/01/pp-impl/115198/status" rel="disclosure">public list of any
    patent disclosures</a> made in connection with the deliverables of the group; that page also
    includes instructions for disclosing a patent. An individual who has actual knowledge of a
    patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential
    Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li>
     <a href="#examples"><span class="secno">2</span> <span class="content">Examples</span></a>
     <ol class="toc">
      <li><a href="#example-add-custom-pip-button"><span class="secno">2.1</span> <span class="content">Add a custom Picture-in-Picture button</span></a>
      <li><a href="#example-monitor-video-pip-changes"><span class="secno">2.2</span> <span class="content">Monitor video Picture-in-Picture changes</span></a>
      <li><a href="#example-update-video-on-window-size-changes"><span class="secno">2.3</span> <span class="content">Update video size based on Picture-in-Picture window size changes</span></a>
     </ol>
    <li>
     <a href="#concepts"><span class="secno">3</span> <span class="content">Concepts</span></a>
     <ol class="toc">
      <li><a href="#request-pip"><span class="secno">3.1</span> <span class="content">Request Picture-in-Picture</span></a>
      <li><a href="#exit-pip"><span class="secno">3.2</span> <span class="content">Exit Picture-in-Picture</span></a>
      <li><a href="#disable-pip"><span class="secno">3.3</span> <span class="content">Disable Picture-in-Picture</span></a>
      <li><a href="#auto-pip"><span class="secno">3.4</span> <span class="content">Auto Picture-in-Picture</span></a>
      <li><a href="#remote-playback"><span class="secno">3.5</span> <span class="content">Interaction with Remote Playback</span></a>
      <li><a href="#media-session"><span class="secno">3.6</span> <span class="content">Interaction with Media Session</span></a>
      <li><a href="#page-visibility"><span class="secno">3.7</span> <span class="content">Interaction with Page Visibility</span></a>
      <li><a href="#one-pip-window"><span class="secno">3.8</span> <span class="content">One Picture-in-Picture window</span></a>
     </ol>
    <li>
     <a href="#api"><span class="secno">4</span> <span class="content">API</span></a>
     <ol class="toc">
      <li><a href="#htmlvideoelement-extensions"><span class="secno">4.1</span> <span class="content">Extensions to <code>HTMLVideoElement</code></span></a>
      <li><a href="#document-extensions"><span class="secno">4.2</span> <span class="content">Extensions to <code>Document</code></span></a>
      <li><a href="#documentorshadowroot-extension"><span class="secno">4.3</span> <span class="content">Extension to <code>DocumentOrShadowRoot</code></span></a>
      <li><a href="#interface-picture-in-picture-window"><span class="secno">4.4</span> <span class="content">Interface <code>PictureInPictureWindow</code></span></a>
      <li><a href="#event-types"><span class="secno">4.5</span> <span class="content">Event types</span></a>
      <li><a href="#task-source"><span class="secno">4.6</span> <span class="content">Task source</span></a>
      <li><a href="#css-pseudo-class"><span class="secno">4.7</span> <span class="content">CSS pseudo-class</span></a>
     </ol>
    <li>
     <a href="#security-considerations"><span class="secno">5</span> <span class="content">Security considerations</span></a>
     <ol class="toc">
      <li><a href="#feature-policy"><span class="secno">5.1</span> <span class="content">Feature Policy</span></a>
     </ol>
    <li><a href="#acknowledgments"><span class="secno">6</span> <span class="content">Acknowledgments</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p><em>This section is non-normative.</em></p>
   <p>Many users want to continue consuming media while they interact with other
content, sites, or applications on their device. A common UI affordance for
this type of activity is Picture-in-Picture (PiP), where the video is contained
in a separate miniature window that is always on top of other windows. This
window stays visible even when user agent is not visible.
Picture-in-Picture is a common platform-level feature among desktop and mobile
OSs.</p>
   <p>This specification aims to allow websites to initiate and control this behavior
by exposing the following sets of properties to the API:</p>
   <ul>
    <li data-md>
     <p>Notify the website when it enters and leaves Picture-in-Picture mode.</p>
    <li data-md>
     <p>Allow the website to trigger Picture-in-Picture mode via a user gesture on a
video element.</p>
    <li data-md>
     <p>Allow the website to know the size of the Picture-in-Picture window and notify
the website when it changes.</p>
    <li data-md>
     <p>Allow the website to exit Picture-in-Picture mode.</p>
    <li data-md>
     <p>Allow the website to check if Picture-in-Picture mode can be triggered.</p>
   </ul>
   <p>The proposed Picture-in-Picture API is very similar to <a data-link-type="biblio" href="#biblio-fullscreen">[Fullscreen]</a> as they
have similar properties. The API only applies to <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement" id="ref-for-htmlvideoelement">HTMLVideoElement</a></code> at the moment but is meant to be
extensible.</p>
   <h2 class="heading settled" data-level="2" id="examples"><span class="secno">2. </span><span class="content">Examples</span><a class="self-link" href="#examples"></a></h2>
   <h3 class="heading settled" data-level="2.1" id="example-add-custom-pip-button"><span class="secno">2.1. </span><span class="content">Add a custom Picture-in-Picture button</span><a class="self-link" href="#example-add-custom-pip-button"></a></h3>
<pre class="language-html highlight"><c- p>&lt;</c-><c- f>video</c-> <c- e>id</c-><c- o>=</c-><c- s>"video"</c-> <c- e>src</c-><c- o>=</c-><c- s>"https://example.com/file.mp4"</c-><c- p>>&lt;/</c-><c- f>video</c-><c- p>></c->

<c- p>&lt;</c-><c- f>button</c-> <c- e>id</c-><c- o>=</c-><c- s>"togglePipButton"</c-><c- p>>&lt;/</c-><c- f>button</c-><c- p>></c->

<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
  <c- kr>const</c-> video <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'video'</c-><c- p>);</c->
  <c- kr>const</c-> togglePipButton <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'togglePipButton'</c-><c- p>);</c->

  <c- c1>// Hide button if Picture-in-Picture is not supported or disabled.</c->
  togglePipButton<c- p>.</c->hidden <c- o>=</c-> <c- o>!</c->document<c- p>.</c->pictureInPictureEnabled <c- o>||</c->
    video<c- p>.</c->disablePictureInPicture<c- p>;</c->

  togglePipButton<c- p>.</c->addEventListener<c- p>(</c-><c- t>'click'</c-><c- p>,</c-> <c- a>function</c-><c- p>()</c-> <c- p>{</c->
    <c- c1>// If there is no element in Picture-in-Picture yet, let’s request</c->
    <c- c1>// Picture-in-Picture for the video, otherwise leave it.</c->
    <c- k>if</c-> <c- p>(</c-><c- o>!</c->document<c- p>.</c->pictureInPictureElement<c- p>)</c-> <c- p>{</c->
      video<c- p>.</c->requestPictureInPicture<c- p>()</c->
      <c- p>.</c-><c- k>catch</c-><c- p>(</c->error <c- p>=></c-> <c- p>{</c->
        <c- c1>// Video failed to enter Picture-in-Picture mode.</c->
      <c- p>});</c->
    <c- p>}</c-> <c- k>else</c-> <c- p>{</c->
      document<c- p>.</c->exitPictureInPicture<c- p>()</c->
      <c- p>.</c-><c- k>catch</c-><c- p>(</c->error <c- p>=></c-> <c- p>{</c->
        <c- c1>// Video failed to leave Picture-in-Picture mode.</c->
      <c- p>});</c->
    <c- p>}</c->
  <c- p>});</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
   <h3 class="heading settled" data-level="2.2" id="example-monitor-video-pip-changes"><span class="secno">2.2. </span><span class="content">Monitor video Picture-in-Picture changes</span><a class="self-link" href="#example-monitor-video-pip-changes"></a></h3>
<pre class="language-html highlight"><c- p>&lt;</c-><c- f>video</c-> <c- e>id</c-><c- o>=</c-><c- s>"video"</c-> <c- e>src</c-><c- o>=</c-><c- s>"https://example.com/file.mp4"</c-><c- p>>&lt;/</c-><c- f>video</c-><c- p>></c->

<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
  <c- kr>const</c-> video <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'video'</c-><c- p>);</c->

  video<c- p>.</c->addEventListener<c- p>(</c-><c- t>'enterpictureinpicture'</c-><c- p>,</c-> <c- a>function</c-><c- p>(</c->event<c- p>)</c-> <c- p>{</c->
    <c- c1>// Video entered Picture-in-Picture mode.</c->
    <c- kr>const</c-> pipWindow <c- o>=</c-> event<c- p>.</c->pictureInPictureWindow<c- p>;</c->
    console<c- p>.</c->log<c- p>(</c-><c- t>'Picture-in-Picture window width: '</c-> <c- o>+</c-> pipWindow<c- p>.</c->width<c- p>);</c->
    console<c- p>.</c->log<c- p>(</c-><c- t>'Picture-in-Picture window height: '</c-> <c- o>+</c-> pipWindow<c- p>.</c->height<c- p>);</c->
  <c- p>});</c->

  video<c- p>.</c->addEventListener<c- p>(</c-><c- t>'leavepictureinpicture'</c-><c- p>,</c-> <c- a>function</c-><c- p>()</c-> <c- p>{</c->
    <c- c1>// Video left Picture-in-Picture mode.</c->
  <c- p>});</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
   <h3 class="heading settled" data-level="2.3" id="example-update-video-on-window-size-changes"><span class="secno">2.3. </span><span class="content">Update video size based on Picture-in-Picture window size changes</span><a class="self-link" href="#example-update-video-on-window-size-changes"></a></h3>
<pre class="language-html highlight"><c- p>&lt;</c-><c- f>video</c-> <c- e>id</c-><c- o>=</c-><c- s>"video"</c-> <c- e>src</c-><c- o>=</c-><c- s>"https://example.com/file.mp4"</c-><c- p>>&lt;/</c-><c- f>video</c-><c- p>></c->

<c- p>&lt;</c-><c- f>button</c-> <c- e>id</c-><c- o>=</c-><c- s>"pipButton"</c-><c- p>>&lt;/</c-><c- f>button</c-><c- p>></c->

<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
  <c- a>let</c-> pipWindow<c- p>;</c->
  <c- kr>const</c-> video <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'video'</c-><c- p>);</c->
  <c- kr>const</c-> pipButton <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'pipButton'</c-><c- p>);</c->

  pipButton<c- p>.</c->addEventListener<c- p>(</c-><c- t>'click'</c-><c- p>,</c-> <c- a>function</c-><c- p>()</c-> <c- p>{</c->
    video<c- p>.</c->requestPictureInPicture<c- p>()</c->
    <c- p>.</c-><c- k>catch</c-><c- p>(</c->error <c- p>=></c-> <c- p>{</c->
      <c- c1>// Video failed to enter Picture-in-Picture mode.</c->
    <c- p>});</c->
  <c- p>});</c->

  video<c- p>.</c->addEventListener<c- p>(</c-><c- t>'enterpictureinpicture'</c-><c- p>,</c-> <c- a>function</c-><c- p>(</c->event<c- p>)</c-> <c- p>{</c->
    <c- c1>// Video entered Picture-in-Picture mode.</c->
    pipWindow <c- o>=</c-> event<c- p>.</c->pictureInPictureWindow<c- p>;</c->
    updateVideoSize<c- p>(</c->pipWindow<c- p>.</c->width<c- p>,</c-> pipWindow<c- p>.</c->height<c- p>);</c->
    pipWindow<c- p>.</c->addEventListener<c- p>(</c-><c- t>'resize'</c-><c- p>,</c-> onPipWindowResize<c- p>);</c->
  <c- p>});</c->

  video<c- p>.</c->addEventListener<c- p>(</c-><c- t>'leavepictureinpicture'</c-><c- p>,</c-> <c- a>function</c-><c- p>()</c-> <c- p>{</c->
    <c- c1>// Video left Picture-in-Picture mode.</c->
    pipWindow<c- p>.</c->removeEventListener<c- p>(</c-><c- t>'resize'</c-><c- p>,</c-> onPipWindowResize<c- p>);</c->
  <c- p>});</c->

  <c- a>function</c-> onPipWindowResize<c- p>(</c->event<c- p>)</c-> <c- p>{</c->
    <c- c1>// Picture-in-Picture window has been resized.</c->
    updateVideoSize<c- p>(</c->event<c- p>.</c->target<c- p>.</c->width<c- p>,</c-> event<c- p>.</c->target<c- p>.</c->height<c- p>);</c->
  <c- p>}</c->

  <c- a>function</c-> updateVideoSize<c- p>(</c->width<c- p>,</c-> height<c- p>)</c-> <c- p>{</c->
    <c- c1>// TODO: Update video size based on pip window width and height.</c->
  <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
   <h2 class="heading settled" data-level="3" id="concepts"><span class="secno">3. </span><span class="content">Concepts</span><a class="self-link" href="#concepts"></a></h2>
   <h3 class="heading settled" data-level="3.1" id="request-pip"><span class="secno">3.1. </span><span class="content">Request Picture-in-Picture</span><a class="self-link" href="#request-pip"></a></h3>
   <p>When the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="request-picture-in-picture-algorithm">request Picture-in-Picture algorithm</dfn> with <var>video</var>, <var>userActivationRequired</var> and <var>playingRequired</var> is invoked, the user agent MUST
run the following steps:</p>
   <ol>
    <li data-md>
     <p>If <a data-link-type="dfn" href="#picture-in-picture-support" id="ref-for-picture-in-picture-support">Picture-in-Picture support</a> is <code>false</code>, throw a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#notsupportederror" id="ref-for-notsupportederror">NotSupportedError</a></code> and abort these steps.</p>
    <li data-md>
     <p>If the document is not allowed to use the <a data-link-type="dfn" href="https://wicg.github.io/feature-policy/#policy-controlled-feature" id="ref-for-policy-controlled-feature">policy-controlled feature</a> named <code>"picture-in-picture"</code>, throw a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#securityerror" id="ref-for-securityerror">SecurityError</a></code> and abort these
steps.</p>
    <li data-md>
     <p>If <var>video</var>’s <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/media.html#dom-media-readystate" id="ref-for-dom-media-readystate">readyState</a></code> attribute is <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/media.html#dom-media-have_nothing" id="ref-for-dom-media-have_nothing">HAVE_NOTHING</a></code>, throw a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror">InvalidStateError</a></code> and abort these steps.</p>
    <li data-md>
     <p>If <var>video</var> has no video track, throw a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror①">InvalidStateError</a></code> and abort
these steps.</p>
    <li data-md>
     <p>OPTIONALLY, if the <code class="idl"><a data-link-type="idl" href="#dom-htmlvideoelement-disablepictureinpicture" id="ref-for-dom-htmlvideoelement-disablepictureinpicture">disablePictureInPicture</a></code> attribute is present on <var>video</var>, throw an <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror②">InvalidStateError</a></code> and abort these steps.</p>
    <li data-md>
     <p>If <var>userActivationRequired</var> is <code>true</code> and the algorithm is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/interaction.html#triggered-by-user-activation" id="ref-for-triggered-by-user-activation">triggered by user activation</a>, throw a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#notallowederror" id="ref-for-notallowederror">NotAllowedError</a></code> and
abort these steps.</p>
    <li data-md>
     <p>If <var>video</var> is <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement">pictureInPictureElement</a></code>, abort these steps.</p>
    <li data-md>
     <p>If <var>playingRequired</var> is <code>true</code> and <var>video</var> is <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/media.html#dom-media-paused" id="ref-for-dom-media-paused">paused</a></code>, abort these steps.</p>
    <li data-md>
     <p>Set <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement①">pictureInPictureElement</a></code> to <var>video</var>.</p>
    <li data-md>
     <p>Let <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="picture-in-picture-window">Picture-in-Picture window</dfn> be a new instance of <code class="idl"><a data-link-type="idl" href="#pictureinpicturewindow" id="ref-for-pictureinpicturewindow">PictureInPictureWindow</a></code> associated with <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement②">pictureInPictureElement</a></code>.</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task">Queue a task</a> to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire">fire an event</a> with the name <code class="idl"><a data-link-type="idl" href="#eventdef-htmlvideoelement-enterpictureinpicture" id="ref-for-eventdef-htmlvideoelement-enterpictureinpicture">enterpictureinpicture</a></code> using <code class="idl"><a data-link-type="idl" href="#enterpictureinpictureevent" id="ref-for-enterpictureinpictureevent">EnterPictureInPictureEvent</a></code> at the <var>video</var> with its <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-bubbles" id="ref-for-dom-event-bubbles">bubbles</a></code> attribute initialized to <code>true</code> and its <code class="idl"><a data-link-type="idl" href="#dom-enterpictureinpictureevent-pictureinpicturewindow" id="ref-for-dom-enterpictureinpictureevent-pictureinpicturewindow">pictureInPictureWindow</a></code> attribute initialized to <a data-link-type="dfn" href="#picture-in-picture-window" id="ref-for-picture-in-picture-window">Picture-in-Picture window</a>.</p>
   </ol>
   <p>It is RECOMMENDED that video frames are not rendered in the page and in the
Picture-in-Picture window at the same time but if they are, they MUST be kept
in sync.</p>
   <p>When a video is played in Picture-in-Picture mode, the states SHOULD transition
as if it was played inline. That means that the events SHOULD fire at the same
time, calling methods SHOULD have the same behaviour, etc. However, the user
agent MAY transition out of Picture-in-Picture when the video element enters a
state that is considered not compatible with Picture-in-Picture.</p>
   <p>Styles applied to <var>video</var> (such as opacity, visibility, transform, etc.) MUST
NOT apply in the Picture-in-Picture window. Its aspect ratio is based on the
video size.</p>
   <p>It is also RECOMMENDED that the Picture-in-Picture window has a maximum and
minimum size. For example, it could be restricted to be between a quarter and
a half of one dimension of the screen.</p>
   <h3 class="heading settled" data-level="3.2" id="exit-pip"><span class="secno">3.2. </span><span class="content">Exit Picture-in-Picture</span><a class="self-link" href="#exit-pip"></a></h3>
   <p>When the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="exit-picture-in-picture-algorithm">exit Picture-in-Picture algorithm</dfn> is invoked,
the user agent MUST run the following steps:</p>
   <ol>
    <li data-md>
     <p>If <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement③">pictureInPictureElement</a></code> is <code>null</code>, throw a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror③">InvalidStateError</a></code> and
abort these steps.</p>
    <li data-md>
     <p>Run the <a data-link-type="dfn" href="#close-window-algorithm" id="ref-for-close-window-algorithm">close window algorithm</a> with the <a data-link-type="dfn" href="#picture-in-picture-window" id="ref-for-picture-in-picture-window①">Picture-in-Picture
window</a> associated with <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement④">pictureInPictureElement</a></code>.</p>
    <li data-md>
     <p>Unset <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement⑤">pictureInPictureElement</a></code>.</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task①">Queue a task</a> to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire①">fire an event</a> with the name <code class="idl"><a data-link-type="idl" href="#eventdef-htmlvideoelement-leavepictureinpicture" id="ref-for-eventdef-htmlvideoelement-leavepictureinpicture">leavepictureinpicture</a></code> at the <var>video</var> with its <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-bubbles" id="ref-for-dom-event-bubbles①">bubbles</a></code> attribute
initialized to <code>true</code>.</p>
   </ol>
   <p>It is NOT RECOMMENDED that the video playback state changes when the <a data-link-type="dfn" href="#exit-picture-in-picture-algorithm" id="ref-for-exit-picture-in-picture-algorithm">exit
Picture-in-Picture algorithm</a> is invoked. The website SHOULD be in control
of the experience if it is website initiated. However, the user agent MAY expose
Picture-in-Picture window controls that change video playback state (e.g.,
pause).</p>
   <p>As one of the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#unloading-document-cleanup-steps" id="ref-for-unloading-document-cleanup-steps">unloading document cleanup steps</a>, run the <a data-link-type="dfn" href="#exit-picture-in-picture-algorithm" id="ref-for-exit-picture-in-picture-algorithm①">exit
Picture-in-Picture algorithm</a>.</p>
   <h3 class="heading settled" data-level="3.3" id="disable-pip"><span class="secno">3.3. </span><span class="content">Disable Picture-in-Picture</span><a class="self-link" href="#disable-pip"></a></h3>
   <p>Some pages may want to disable Picture-in-Picture mode for a video element; for
example, they may want to prevent the user agent from suggesting a
Picture-in-Picture context menu or to request Picture-in-Picture automatically
in some cases. To support these use cases, a new <code class="idl"><a data-link-type="idl" href="#dom-htmlvideoelement-disablepictureinpicture" id="ref-for-dom-htmlvideoelement-disablepictureinpicture①">disablePictureInPicture</a></code> attribute is added to the list of content attributes for video elements.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-htmlvideoelement-disablepictureinpicture" id="ref-for-dom-htmlvideoelement-disablepictureinpicture②">disablePictureInPicture</a></code> IDL attribute MUST <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#reflect" id="ref-for-reflect">reflect</a> the content
attribute of the same name.</p>
   <p>If the <code class="idl"><a data-link-type="idl" href="#dom-htmlvideoelement-disablepictureinpicture" id="ref-for-dom-htmlvideoelement-disablepictureinpicture③">disablePictureInPicture</a></code> attribute is present on the video element,
the user agent SHOULD NOT play the video element in Picture-in-Picture or
present any UI to do so.</p>
   <p>When the <code class="idl"><a data-link-type="idl" href="#dom-htmlvideoelement-disablepictureinpicture" id="ref-for-dom-htmlvideoelement-disablepictureinpicture④">disablePictureInPicture</a></code> attribute is added to a <var>video</var> element,
the user agent SHOULD run these steps:</p>
   <ol>
    <li data-md>
     <p>Reject any pending promises returned by the <code class="idl"><a data-link-type="idl" href="#dom-htmlvideoelement-requestpictureinpicture" id="ref-for-dom-htmlvideoelement-requestpictureinpicture">requestPictureInPicture()</a></code> method with <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror④">InvalidStateError</a></code>.</p>
    <li data-md>
     <p>If <var>video</var> is <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement⑥">pictureInPictureElement</a></code>, run the <a data-link-type="dfn" href="#exit-picture-in-picture-algorithm" id="ref-for-exit-picture-in-picture-algorithm②">exit
Picture-in-Picture algorithm</a>.</p>
   </ol>
   <h3 class="heading settled" data-level="3.4" id="auto-pip"><span class="secno">3.4. </span><span class="content">Auto Picture-in-Picture</span><a class="self-link" href="#auto-pip"></a></h3>
   <p>Some pages may want to automatically enter and leave Picture-in-Picture for
a video element; for example, video meeting web apps would benefit from
some automatic Picture-in-Picture behavior when the user switches back and forth
between the web app and other applications/tabs.
To support these use cases, a new <code class="idl"><a data-link-type="idl" href="#dom-htmlvideoelement-autopictureinpicture" id="ref-for-dom-htmlvideoelement-autopictureinpicture">autoPictureInPicture</a></code> attribute is
added to the list of content attributes for video elements.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-htmlvideoelement-autopictureinpicture" id="ref-for-dom-htmlvideoelement-autopictureinpicture①">autoPictureInPicture</a></code> IDL attribute MUST <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#reflect" id="ref-for-reflect①">reflect</a> the content
attribute of the same name.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="autopictureinpictureelement">autoPictureInPictureElement</dfn> is the video element, among all
video elements with the <code class="idl"><a data-link-type="idl" href="#dom-htmlvideoelement-autopictureinpicture" id="ref-for-dom-htmlvideoelement-autopictureinpicture②">autoPictureInPicture</a></code> attribute currently set,
whose <code class="idl"><a data-link-type="idl" href="#dom-htmlvideoelement-autopictureinpicture" id="ref-for-dom-htmlvideoelement-autopictureinpicture③">autoPictureInPicture</a></code> attribute was set most recently. Note that the <a data-link-type="dfn" href="#autopictureinpictureelement" id="ref-for-autopictureinpictureelement">autoPictureInPictureElement</a> can have the <code class="idl"><a data-link-type="idl" href="#dom-htmlvideoelement-disablepictureinpicture" id="ref-for-dom-htmlvideoelement-disablepictureinpicture⑤">disablePictureInPicture</a></code> attribute set. In that case, as expected, it won’t be allowed to enter
Picture-in-Picture mode in the <a data-link-type="dfn" href="#request-picture-in-picture-algorithm" id="ref-for-request-picture-in-picture-algorithm">request Picture-in-Picture algorithm</a>.</p>
   <p>When the visibility state of a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context" id="ref-for-top-level-browsing-context">top-level browsing context</a> value
switches from "visible" to "hidden", the user agent MAY run these steps:</p>
   <ol>
    <li data-md>
     <p>If <a data-link-type="dfn" href="#autopictureinpictureelement" id="ref-for-autopictureinpictureelement①">autoPictureInPictureElement</a> is <code>null</code>, abort these steps.</p>
    <li data-md>
     <p>If <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement⑦">pictureInPictureElement</a></code> is set, abort these steps.</p>
    <li data-md>
     <p>Let <var>video</var> be <a data-link-type="dfn" href="#autopictureinpictureelement" id="ref-for-autopictureinpictureelement②">autoPictureInPictureElement</a>.</p>
    <li data-md>
     <p>Let <var>userActivationRequired</var> be <code>false</code>.</p>
    <li data-md>
     <p>Let <var>playingRequired</var> be <code>true</code>.</p>
    <li data-md>
     <p>Run the <a data-link-type="dfn" href="#request-picture-in-picture-algorithm" id="ref-for-request-picture-in-picture-algorithm①">request Picture-in-Picture algorithm</a> with <var>video</var>, <var>userActivationRequired</var>, and <var>playingRequired</var>.</p>
   </ol>
   <p>When the visibility state of a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context" id="ref-for-top-level-browsing-context①">top-level browsing context</a> value
switches from "hidden" to "visible", the user agent MAY run these steps:</p>
   <ol>
    <li data-md>
     <p>If <a data-link-type="dfn" href="#autopictureinpictureelement" id="ref-for-autopictureinpictureelement③">autoPictureInPictureElement</a> is <code>null</code>, abort these steps.</p>
    <li data-md>
     <p>If <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement⑧">pictureInPictureElement</a></code> is <a data-link-type="dfn" href="#autopictureinpictureelement" id="ref-for-autopictureinpictureelement④">autoPictureInPictureElement</a>, run
the <a data-link-type="dfn" href="#exit-picture-in-picture-algorithm" id="ref-for-exit-picture-in-picture-algorithm③">exit Picture-in-Picture algorithm</a>.</p>
   </ol>
   <h3 class="heading settled" data-level="3.5" id="remote-playback"><span class="secno">3.5. </span><span class="content">Interaction with Remote Playback</span><a class="self-link" href="#remote-playback"></a></h3>
   <p>The <a data-link-type="biblio" href="#biblio-remote-playback">[Remote-Playback]</a> specification defines a <a data-link-type="dfn" href="https://w3c.github.io/remote-playback/#dfn-local-playback-device" id="ref-for-dfn-local-playback-device">local playback device</a> and a <a data-link-type="dfn" href="https://w3c.github.io/remote-playback/#dfn-local-playback-state" id="ref-for-dfn-local-playback-state">local playback state</a>. For the purpose of Picture-in-Picture, the
playback is local and regardless of whether it is played in page or in
Picture-in-Picture.</p>
   <h3 class="heading settled" data-level="3.6" id="media-session"><span class="secno">3.6. </span><span class="content">Interaction with Media Session</span><a class="self-link" href="#media-session"></a></h3>
   <p>The API will have to be used with the <a data-link-type="biblio" href="#biblio-mediasession">[MediaSession]</a> API for customizing the
available controls on the Picture-in-Picture window.</p>
   <h3 class="heading settled" data-level="3.7" id="page-visibility"><span class="secno">3.7. </span><span class="content">Interaction with Page Visibility</span><a class="self-link" href="#page-visibility"></a></h3>
   <p>When <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement⑨">pictureInPictureElement</a></code> is set, the Picture-in-Picture window MUST
be visible, even when the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document">Document</a> is not in focus or hidden. The user
agent SHOULD provide a way for users to manually close the Picture-in-Picture
window.</p>
   <p>The <a data-link-type="biblio" href="#biblio-page-visibility">[Page-Visibility]</a> specification defines a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/page-visibility/#dom-visibilitystate" id="ref-for-dom-visibilitystate">visibilityState</a></code> attribute used to determine the visibility state of a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context" id="ref-for-top-level-browsing-context②">top-level browsing
context</a>. The Picture-in-Picture window visibility MUST NOT be taken into
account when determining the value returned by <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/page-visibility/#dom-visibilitystate" id="ref-for-dom-visibilitystate①">visibilityState</a></code>.</p>
   <h3 class="heading settled" data-level="3.8" id="one-pip-window"><span class="secno">3.8. </span><span class="content">One Picture-in-Picture window</span><a class="self-link" href="#one-pip-window"></a></h3>
   <p>Operating systems with a Picture-in-Picture API usually restrict
Picture-in-Picture mode to only one window.  Whether only one window is allowed
in Picture-in-Picture mode will be left to the implementation and the platform.
However, because of the one Picture-in-Picture window limitation, the
specification assumes that a given <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document">Document</a></code> can only have one
Picture-in-Picture window.</p>
   <p>What happens when there is a Picture-in-Picture request while a window is
already in Picture-in-Picture will be left as an implementation detail: the
current Picture-in-Picture window could be closed, the Picture-in-Picture
request could be rejected or even two Picture-in-Picture windows could be
created. Regardless, the User Agent will have to fire the appropriate events
in order to notify the website of the Picture-in-Picture status changes.</p>
   <h2 class="heading settled" data-level="4" id="api"><span class="secno">4. </span><span class="content">API</span><a class="self-link" href="#api"></a></h2>
   <h3 class="heading settled" data-level="4.1" id="htmlvideoelement-extensions"><span class="secno">4.1. </span><span class="content">Extensions to <code>HTMLVideoElement</code></span><a class="self-link" href="#htmlvideoelement-extensions"></a></h3>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement" id="ref-for-htmlvideoelement①"><c- g>HTMLVideoElement</c-></a> {
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject"><c- g>NewObject</c-></a>] <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#pictureinpicturewindow" id="ref-for-pictureinpicturewindow①"><c- n>PictureInPictureWindow</c-></a>> <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLVideoElement" data-dfn-type="method" data-export data-lt="requestPictureInPicture()" id="dom-htmlvideoelement-requestpictureinpicture"><code><c- g>requestPictureInPicture</c-></code></dfn>();

  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="HTMLVideoElement" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-htmlvideoelement-onenterpictureinpicture"><code><c- g>onenterpictureinpicture</c-></code><a class="self-link" href="#dom-htmlvideoelement-onenterpictureinpicture"></a></dfn>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="HTMLVideoElement" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-htmlvideoelement-onleavepictureinpicture"><code><c- g>onleavepictureinpicture</c-></code><a class="self-link" href="#dom-htmlvideoelement-onleavepictureinpicture"></a></dfn>;

  [<a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions" id="ref-for-cereactions"><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLVideoElement" data-dfn-type="attribute" data-export data-type="boolean" id="dom-htmlvideoelement-autopictureinpicture"><code><c- g>autoPictureInPicture</c-></code></dfn>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions" id="ref-for-cereactions①"><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLVideoElement" data-dfn-type="attribute" data-export data-type="boolean" id="dom-htmlvideoelement-disablepictureinpicture"><code><c- g>disablePictureInPicture</c-></code></dfn>;
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-htmlvideoelement-requestpictureinpicture" id="ref-for-dom-htmlvideoelement-requestpictureinpicture①">requestPictureInPicture()</a></code> method, when invoked, MUST
return <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise" id="ref-for-a-new-promise">a new promise</a> <var>promise</var> and run the following steps <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel">in
parallel</a>:</p>
   <ol>
    <li data-md>
     <p>Let <var>video</var> be the video element on which the method was invoked.</p>
    <li data-md>
     <p>Let <var>userActivationRequired</var> be <code>true</code> if <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement①⓪">pictureInPictureElement</a></code> is <code>null</code>. It is <code>false</code> otherwise.</p>
    <li data-md>
     <p>Let <var>playingRequired</var> be <code>false</code>.</p>
    <li data-md>
     <p>Run the <a data-link-type="dfn" href="#request-picture-in-picture-algorithm" id="ref-for-request-picture-in-picture-algorithm②">request Picture-in-Picture algorithm</a> with <var>video</var>, <var>userActivationRequired</var>, and <var>playingRequired</var>.</p>
    <li data-md>
     <p>If the previous step threw an exception, reject <var>promise</var> with that
exception and abort these steps.</p>
    <li data-md>
     <p>Return <var>promise</var> with the <a data-link-type="dfn" href="#picture-in-picture-window" id="ref-for-picture-in-picture-window②">Picture-in-Picture window</a> associated with <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement①①">pictureInPictureElement</a></code>.</p>
   </ol>
   <h3 class="heading settled" data-level="4.2" id="document-extensions"><span class="secno">4.2. </span><span class="content">Extensions to <code>Document</code></span><a class="self-link" href="#document-extensions"></a></h3>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①"><c- g>Document</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export data-readonly data-type="boolean" id="dom-document-pictureinpictureenabled"><code><c- g>pictureInPictureEnabled</c-></code></dfn>;

  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①"><c- g>NewObject</c-></a>] <c- b>Promise</c->&lt;<c- b>void</c->> <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="method" data-export data-lt="exitPictureInPicture()" id="dom-document-exitpictureinpicture"><code><c- g>exitPictureInPicture</c-></code></dfn>();
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-document-pictureinpictureenabled" id="ref-for-dom-document-pictureinpictureenabled">pictureInPictureEnabled</a></code> attribute’s getter must return <code>true</code> if <a data-link-type="dfn" href="#picture-in-picture-support" id="ref-for-picture-in-picture-support①">Picture-in-Picture support</a> is <code>true</code> and the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object">context object</a> is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#allowed-to-use" id="ref-for-allowed-to-use">allowed to use</a> the feature indicated by attribute name <code>picture-in-picture</code>, and <code>false</code> otherwise.</p>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="picture-in-picture-support">Picture-in-Picture support</dfn> is <code>false</code> if there’s a user preference
that disables it or a platform limitation. It is <code>true</code> otherwise.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-document-exitpictureinpicture" id="ref-for-dom-document-exitpictureinpicture">exitPictureInPicture()</a></code> method, when invoked, MUST
return <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise" id="ref-for-a-new-promise①">a new promise</a> <var>promise</var> and run the following steps <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel①">in
parallel</a>:</p>
   <ol>
    <li data-md>
     <p>Run the <a data-link-type="dfn" href="#exit-picture-in-picture-algorithm" id="ref-for-exit-picture-in-picture-algorithm④">exit Picture-in-Picture algorithm</a>.</p>
    <li data-md>
     <p>If the previous step threw an exception, reject <var>promise</var> with that
exception and abort these steps.</p>
    <li data-md>
     <p>Return <var>promise</var>.</p>
   </ol>
   <h3 class="heading settled" data-level="4.3" id="documentorshadowroot-extension"><span class="secno">4.3. </span><span class="content">Extension to <code>DocumentOrShadowRoot</code></span><a class="self-link" href="#documentorshadowroot-extension"></a></h3>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <c- b>mixin</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#documentorshadowroot" id="ref-for-documentorshadowroot"><c- g>DocumentOrShadowRoot</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element"><c- n>Element</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="DocumentOrShadowRoot" data-dfn-type="attribute" data-export data-readonly data-type="Element?" id="dom-documentorshadowroot-pictureinpictureelement"><code><c- g>pictureInPictureElement</c-></code></dfn>;
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement①②">pictureInPictureElement</a></code> attribute’s getter must run these steps:</p>
   <ol>
    <li data-md>
     <p>If the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object①">context object</a> is not <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#connected" id="ref-for-connected">connected</a>, return <code>null</code> and abort
these steps.</p>
    <li data-md>
     <p>Let <var>candidate</var> be the result of <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#retarget" id="ref-for-retarget">retargeting</a> Picture-in-Picture
element against the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object②">context object</a>.</p>
    <li data-md>
     <p>If <var>candidate</var> and the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object③">context object</a> are in the same <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree" id="ref-for-concept-tree">tree</a>,
return <var>candidate</var> and abort these steps.</p>
    <li data-md>
     <p>Return <code>null</code>.</p>
   </ol>
   <h3 class="heading settled" data-level="4.4" id="interface-picture-in-picture-window"><span class="secno">4.4. </span><span class="content">Interface <code>PictureInPictureWindow</code></span><a class="self-link" href="#interface-picture-in-picture-window"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="pictureinpicturewindow"><code><c- g>PictureInPictureWindow</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget"><c- n>EventTarget</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long"><c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="PictureInPictureWindow" data-dfn-type="attribute" data-export data-readonly data-type="long" id="dom-pictureinpicturewindow-width"><code><c- g>width</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long①"><c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="PictureInPictureWindow" data-dfn-type="attribute" data-export data-readonly data-type="long" id="dom-pictureinpicturewindow-height"><code><c- g>height</c-></code></dfn>;

  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="PictureInPictureWindow" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-pictureinpicturewindow-onresize"><code><c- g>onresize</c-></code><a class="self-link" href="#dom-pictureinpicturewindow-onresize"></a></dfn>;
};
</pre>
   <p>A <code class="idl"><a data-link-type="idl" href="#pictureinpicturewindow" id="ref-for-pictureinpicturewindow②">PictureInPictureWindow</a></code> instance represents a <a data-link-type="dfn" href="#picture-in-picture-window" id="ref-for-picture-in-picture-window③">Picture-in-Picture
window</a> associated with an <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement" id="ref-for-htmlvideoelement②">HTMLVideoElement</a></code>. When instantiated, an
instance of <code class="idl"><a data-link-type="idl" href="#pictureinpicturewindow" id="ref-for-pictureinpicturewindow③">PictureInPictureWindow</a></code> has its <var>state</var> set to <var>opened</var>.</p>
   <p>When the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="close-window-algorithm">close window algorithm</dfn> with an instance of <code class="idl"><a data-link-type="idl" href="#pictureinpicturewindow" id="ref-for-pictureinpicturewindow④">PictureInPictureWindow</a></code> is invoked, its <var>state</var> is set to <var>closed</var>.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-pictureinpicturewindow-width" id="ref-for-dom-pictureinpicturewindow-width">width</a></code> attribute MUST return the width in <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px">CSS pixels</a> of the <a data-link-type="dfn" href="#picture-in-picture-window" id="ref-for-picture-in-picture-window④">Picture-in-Picture window</a> associated with <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement①③">pictureInPictureElement</a></code> if
the <var>state</var> is <var>opened</var>. Otherwise, it MUST return 0.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-pictureinpicturewindow-height" id="ref-for-dom-pictureinpicturewindow-height">height</a></code> attribute MUST return the height in <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px①">CSS pixels</a> of the <a data-link-type="dfn" href="#picture-in-picture-window" id="ref-for-picture-in-picture-window⑤">Picture-in-Picture window</a> associated with <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement①④">pictureInPictureElement</a></code> if
the <var>state</var> is <var>opened</var>. Otherwise, it MUST return 0.</p>
   <p>When the size of the <a data-link-type="dfn" href="#picture-in-picture-window" id="ref-for-picture-in-picture-window⑥">Picture-in-Picture window</a> associated with <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement①⑤">pictureInPictureElement</a></code> changes, the user agent MUST <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task②">queue a task</a> to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire②">fire an event</a> with the name <code class="idl"><a data-link-type="idl" href="#eventdef-pictureinpicturewindow-resize" id="ref-for-eventdef-pictureinpicturewindow-resize">resize</a></code> at <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement①⑥">pictureInPictureElement</a></code>.</p>
   <h3 class="heading settled" data-level="4.5" id="event-types"><span class="secno">4.5. </span><span class="content">Event types</span><a class="self-link" href="#event-types"></a></h3>
   <dl>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="HTMLVideoElement" data-dfn-type="event" data-export id="eventdef-htmlvideoelement-enterpictureinpicture"><code>enterpictureinpicture</code></dfn>
    <dd data-md>
     <p>Fired on a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement" id="ref-for-htmlvideoelement③">HTMLVideoElement</a></code> when it enters Picture-in-Picture.</p>
   </dl>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="enterpictureinpictureevent"><code><c- g>EnterPictureInPictureEvent</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event"><c- n>Event</c-></a> {
    <dfn class="idl-code" data-dfn-for="EnterPictureInPictureEvent" data-dfn-type="constructor" data-export data-lt="EnterPictureInPictureEvent(type, eventInitDict)|constructor(type, eventInitDict)" id="dom-enterpictureinpictureevent-enterpictureinpictureevent"><code><c- g>constructor</c-></code><a class="self-link" href="#dom-enterpictureinpictureevent-enterpictureinpictureevent"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="EnterPictureInPictureEvent/EnterPictureInPictureEvent(type, eventInitDict), EnterPictureInPictureEvent/constructor(type, eventInitDict)" data-dfn-type="argument" data-export id="dom-enterpictureinpictureevent-enterpictureinpictureevent-type-eventinitdict-type"><code><c- g>type</c-></code><a class="self-link" href="#dom-enterpictureinpictureevent-enterpictureinpictureevent-type-eventinitdict-type"></a></dfn>, <a class="n" data-link-type="idl-name" href="#dictdef-enterpictureinpictureeventinit" id="ref-for-dictdef-enterpictureinpictureeventinit"><c- n>EnterPictureInPictureEventInit</c-></a> <dfn class="idl-code" data-dfn-for="EnterPictureInPictureEvent/EnterPictureInPictureEvent(type, eventInitDict), EnterPictureInPictureEvent/constructor(type, eventInitDict)" data-dfn-type="argument" data-export id="dom-enterpictureinpictureevent-enterpictureinpictureevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code><a class="self-link" href="#dom-enterpictureinpictureevent-enterpictureinpictureevent-type-eventinitdict-eventinitdict"></a></dfn>);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#pictureinpicturewindow" id="ref-for-pictureinpicturewindow⑤"><c- n>PictureInPictureWindow</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="EnterPictureInPictureEvent" data-dfn-type="attribute" data-export data-readonly data-type="PictureInPictureWindow" id="dom-enterpictureinpictureevent-pictureinpicturewindow"><code><c- g>pictureInPictureWindow</c-></code></dfn>;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-enterpictureinpictureeventinit"><code><c- g>EnterPictureInPictureEventInit</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit"><c- n>EventInit</c-></a> {
    <c- b>required</c-> <a class="n" data-link-type="idl-name" href="#pictureinpicturewindow" id="ref-for-pictureinpicturewindow⑥"><c- n>PictureInPictureWindow</c-></a> <dfn class="idl-code" data-dfn-for="EnterPictureInPictureEventInit" data-dfn-type="dict-member" data-export data-type="PictureInPictureWindow " id="dom-enterpictureinpictureeventinit-pictureinpicturewindow"><code><c- g>pictureInPictureWindow</c-></code><a class="self-link" href="#dom-enterpictureinpictureeventinit-pictureinpicturewindow"></a></dfn>;
};
</pre>
   <dl>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="HTMLVideoElement" data-dfn-type="event" data-export id="eventdef-htmlvideoelement-leavepictureinpicture"><code>leavepictureinpicture</code></dfn>
    <dd data-md>
     <p>Fired on a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement" id="ref-for-htmlvideoelement④">HTMLVideoElement</a></code> when it leaves Picture-in-Picture mode.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="PictureInPictureWindow" data-dfn-type="event" data-export id="eventdef-pictureinpicturewindow-resize"><code>resize</code></dfn>
    <dd data-md>
     <p>Fired on a <code class="idl"><a data-link-type="idl" href="#pictureinpicturewindow" id="ref-for-pictureinpicturewindow⑦">PictureInPictureWindow</a></code> when it changes size.</p>
   </dl>
   <h3 class="heading settled" data-level="4.6" id="task-source"><span class="secno">4.6. </span><span class="content">Task source</span><a class="self-link" href="#task-source"></a></h3>
   <p>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#task-source" id="ref-for-task-source">task source</a> for all the tasks queued in this specification is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/media.html#media-element-event-task-source" id="ref-for-media-element-event-task-source">media element event task source</a> of the video element in question.</p>
   <h3 class="heading settled" data-level="4.7" id="css-pseudo-class"><span class="secno">4.7. </span><span class="content">CSS pseudo-class</span><a class="self-link" href="#css-pseudo-class"></a></h3>
   <p>The <code>:picture-in-picture</code> <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-class" id="ref-for-pseudo-class">pseudo-class</a> MUST match the Picture-in-Picture
element. It is different from the <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-pictureinpictureelement" id="ref-for-dom-documentorshadowroot-pictureinpictureelement①⑦">pictureInPictureElement</a></code> as it does NOT
apply to the shadow host chain.</p>
   <h2 class="heading settled" data-level="5" id="security-considerations"><span class="secno">5. </span><span class="content">Security considerations</span><a class="self-link" href="#security-considerations"></a></h2>
   <p><em>This section is non-normative.</em></p>
   <p>The API applies only to <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement" id="ref-for-htmlvideoelement⑤">HTMLVideoElement</a></code> in order to start on a minimal
viable product that has limited security issues. Later versions of this
specification may allow PIP-ing arbitrary HTML content.</p>
   <h3 class="heading settled" data-level="5.1" id="feature-policy"><span class="secno">5.1. </span><span class="content">Feature Policy</span><a class="self-link" href="#feature-policy"></a></h3>
   <p>This specification defines a <a data-link-type="dfn" href="https://wicg.github.io/feature-policy/#policy-controlled-feature" id="ref-for-policy-controlled-feature①">policy-controlled feature</a> that controls
whether the <a data-link-type="dfn" href="#request-picture-in-picture-algorithm" id="ref-for-request-picture-in-picture-algorithm③">request Picture-in-Picture algorithm</a> may return a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#securityerror" id="ref-for-securityerror①">SecurityError</a></code> and whether <code class="idl"><a data-link-type="idl" href="#dom-document-pictureinpictureenabled" id="ref-for-dom-document-pictureinpictureenabled①">pictureInPictureEnabled</a></code> is <code>true</code> or <code>false</code>.</p>
   <p>The <a data-link-type="dfn" href="https://wicg.github.io/feature-policy/#feature-name" id="ref-for-feature-name">feature name</a> for this feature is <code>"picture-in-picture"</code>.</p>
   <p>The <a data-link-type="dfn" href="https://wicg.github.io/feature-policy/#default-allowlist" id="ref-for-default-allowlist">default allowlist</a> for this feature is <code>*</code>.</p>
   <h2 class="heading settled" data-level="6" id="acknowledgments"><span class="secno">6. </span><span class="content">Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2>
   <p>Thanks to Jennifer Apacible, Zouhir Chahoud, Marcos Cáceres, Philip Jägenstedt,
Jeremy Jones, Chris Needham, Jer Noble, Justin Uberti, Yoav Weiss, and Eckhart
Wörner for their contributions to this document.</p>
   <p id="back-to-top" role="navigation"><a href="#toc"><abbr title="Back to Top">↑</abbr></a></p>
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </main>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-htmlvideoelement-autopictureinpicture">autoPictureInPicture</a><span>, in §4.1</span>
   <li><a href="#autopictureinpictureelement">autoPictureInPictureElement</a><span>, in §3.4</span>
   <li><a href="#close-window-algorithm">close window algorithm</a><span>, in §4.4</span>
   <li><a href="#dom-enterpictureinpictureevent-enterpictureinpictureevent">constructor(type, eventInitDict)</a><span>, in §4.5</span>
   <li><a href="#dom-htmlvideoelement-disablepictureinpicture">disablePictureInPicture</a><span>, in §4.1</span>
   <li><a href="#eventdef-htmlvideoelement-enterpictureinpicture">enterpictureinpicture</a><span>, in §4.5</span>
   <li><a href="#enterpictureinpictureevent">EnterPictureInPictureEvent</a><span>, in §4.5</span>
   <li><a href="#dictdef-enterpictureinpictureeventinit">EnterPictureInPictureEventInit</a><span>, in §4.5</span>
   <li><a href="#dom-enterpictureinpictureevent-enterpictureinpictureevent">EnterPictureInPictureEvent(type, eventInitDict)</a><span>, in §4.5</span>
   <li><a href="#dom-document-exitpictureinpicture">exitPictureInPicture()</a><span>, in §4.2</span>
   <li><a href="#exit-picture-in-picture-algorithm">exit Picture-in-Picture algorithm</a><span>, in §3.2</span>
   <li><a href="#dom-pictureinpicturewindow-height">height</a><span>, in §4.4</span>
   <li><a href="#eventdef-htmlvideoelement-leavepictureinpicture">leavepictureinpicture</a><span>, in §4.5</span>
   <li><a href="#dom-htmlvideoelement-onenterpictureinpicture">onenterpictureinpicture</a><span>, in §4.1</span>
   <li><a href="#dom-htmlvideoelement-onleavepictureinpicture">onleavepictureinpicture</a><span>, in §4.1</span>
   <li><a href="#dom-pictureinpicturewindow-onresize">onresize</a><span>, in §4.4</span>
   <li><a href="#dom-documentorshadowroot-pictureinpictureelement">pictureInPictureElement</a><span>, in §4.3</span>
   <li><a href="#dom-document-pictureinpictureenabled">pictureInPictureEnabled</a><span>, in §4.2</span>
   <li><a href="#picture-in-picture-support">Picture-in-Picture support</a><span>, in §4.2</span>
   <li>
    pictureInPictureWindow
    <ul>
     <li><a href="#dom-enterpictureinpictureevent-pictureinpicturewindow">attribute for EnterPictureInPictureEvent</a><span>, in §4.5</span>
     <li><a href="#dom-enterpictureinpictureeventinit-pictureinpicturewindow">dict-member for EnterPictureInPictureEventInit</a><span>, in §4.5</span>
    </ul>
   <li><a href="#pictureinpicturewindow">PictureInPictureWindow</a><span>, in §4.4</span>
   <li><a href="#picture-in-picture-window">Picture-in-Picture window</a><span>, in §3.1</span>
   <li><a href="#dom-htmlvideoelement-requestpictureinpicture">requestPictureInPicture()</a><span>, in §4.1</span>
   <li><a href="#request-picture-in-picture-algorithm">request Picture-in-Picture algorithm</a><span>, in §3.1</span>
   <li><a href="#eventdef-pictureinpicturewindow-resize">resize</a><span>, in §4.5</span>
   <li><a href="#dom-pictureinpicturewindow-width">width</a><span>, in §4.4</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-px">
   <a href="https://drafts.csswg.org/css-values-4/#px">https://drafts.csswg.org/css-values-4/#px</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-px">4.4. Interface PictureInPictureWindow</a> <a href="#ref-for-px①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-document">
   <a href="https://dom.spec.whatwg.org/#document">https://dom.spec.whatwg.org/#document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document">3.8. One Picture-in-Picture window</a>
    <li><a href="#ref-for-document①">4.2. Extensions to Document</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-documentorshadowroot">
   <a href="https://dom.spec.whatwg.org/#documentorshadowroot">https://dom.spec.whatwg.org/#documentorshadowroot</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-documentorshadowroot">4.3. Extension to DocumentOrShadowRoot</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-element">
   <a href="https://dom.spec.whatwg.org/#element">https://dom.spec.whatwg.org/#element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element">4.3. Extension to DocumentOrShadowRoot</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event">
   <a href="https://dom.spec.whatwg.org/#event">https://dom.spec.whatwg.org/#event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event">4.5. Event types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dictdef-eventinit">
   <a href="https://dom.spec.whatwg.org/#dictdef-eventinit">https://dom.spec.whatwg.org/#dictdef-eventinit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-eventinit">4.5. Event types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventtarget">
   <a href="https://dom.spec.whatwg.org/#eventtarget">https://dom.spec.whatwg.org/#eventtarget</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventtarget">4.4. Interface PictureInPictureWindow</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-event-bubbles">
   <a href="https://dom.spec.whatwg.org/#dom-event-bubbles">https://dom.spec.whatwg.org/#dom-event-bubbles</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-event-bubbles">3.1. Request Picture-in-Picture</a>
    <li><a href="#ref-for-dom-event-bubbles①">3.2. Exit Picture-in-Picture</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-connected">
   <a href="https://dom.spec.whatwg.org/#connected">https://dom.spec.whatwg.org/#connected</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-connected">4.3. Extension to DocumentOrShadowRoot</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-context-object">
   <a href="https://dom.spec.whatwg.org/#context-object">https://dom.spec.whatwg.org/#context-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-context-object">4.2. Extensions to Document</a>
    <li><a href="#ref-for-context-object①">4.3. Extension to DocumentOrShadowRoot</a> <a href="#ref-for-context-object②">(2)</a> <a href="#ref-for-context-object③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document">
   <a href="https://dom.spec.whatwg.org/#concept-document">https://dom.spec.whatwg.org/#concept-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document">3.7. Interaction with Page Visibility</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-event-fire">
   <a href="https://dom.spec.whatwg.org/#concept-event-fire">https://dom.spec.whatwg.org/#concept-event-fire</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-event-fire">3.1. Request Picture-in-Picture</a>
    <li><a href="#ref-for-concept-event-fire①">3.2. Exit Picture-in-Picture</a>
    <li><a href="#ref-for-concept-event-fire②">4.4. Interface PictureInPictureWindow</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-retarget">
   <a href="https://dom.spec.whatwg.org/#retarget">https://dom.spec.whatwg.org/#retarget</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-retarget">4.3. Extension to DocumentOrShadowRoot</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-tree">
   <a href="https://dom.spec.whatwg.org/#concept-tree">https://dom.spec.whatwg.org/#concept-tree</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-tree">4.3. Extension to DocumentOrShadowRoot</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-default-allowlist">
   <a href="https://wicg.github.io/feature-policy/#default-allowlist">https://wicg.github.io/feature-policy/#default-allowlist</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-default-allowlist">5.1. Feature Policy</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-feature-name">
   <a href="https://wicg.github.io/feature-policy/#feature-name">https://wicg.github.io/feature-policy/#feature-name</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-feature-name">5.1. Feature Policy</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-policy-controlled-feature">
   <a href="https://wicg.github.io/feature-policy/#policy-controlled-feature">https://wicg.github.io/feature-policy/#policy-controlled-feature</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-policy-controlled-feature">3.1. Request Picture-in-Picture</a>
    <li><a href="#ref-for-policy-controlled-feature①">5.1. Feature Policy</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cereactions">
   <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cereactions">4.1. Extensions to HTMLVideoElement</a> <a href="#ref-for-cereactions①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventhandler">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler">https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventhandler">4.1. Extensions to HTMLVideoElement</a> <a href="#ref-for-eventhandler①">(2)</a>
    <li><a href="#ref-for-eventhandler②">4.4. Interface PictureInPictureWindow</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-media-have_nothing">
   <a href="https://html.spec.whatwg.org/multipage/media.html#dom-media-have_nothing">https://html.spec.whatwg.org/multipage/media.html#dom-media-have_nothing</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-media-have_nothing">3.1. Request Picture-in-Picture</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-htmlvideoelement">
   <a href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement">https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlvideoelement">1. Introduction</a>
    <li><a href="#ref-for-htmlvideoelement①">4.1. Extensions to HTMLVideoElement</a>
    <li><a href="#ref-for-htmlvideoelement②">4.4. Interface PictureInPictureWindow</a>
    <li><a href="#ref-for-htmlvideoelement③">4.5. Event types</a> <a href="#ref-for-htmlvideoelement④">(2)</a>
    <li><a href="#ref-for-htmlvideoelement⑤">5. Security considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-allowed-to-use">
   <a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#allowed-to-use">https://html.spec.whatwg.org/multipage/iframe-embed-object.html#allowed-to-use</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-allowed-to-use">4.2. Extensions to Document</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-in-parallel">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel">https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-parallel">4.1. Extensions to HTMLVideoElement</a>
    <li><a href="#ref-for-in-parallel①">4.2. Extensions to Document</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-media-element-event-task-source">
   <a href="https://html.spec.whatwg.org/multipage/media.html#media-element-event-task-source">https://html.spec.whatwg.org/multipage/media.html#media-element-event-task-source</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-media-element-event-task-source">4.6. Task source</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-media-paused">
   <a href="https://html.spec.whatwg.org/multipage/media.html#dom-media-paused">https://html.spec.whatwg.org/multipage/media.html#dom-media-paused</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-media-paused">3.1. Request Picture-in-Picture</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-queue-a-task">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-queue-a-task">3.1. Request Picture-in-Picture</a>
    <li><a href="#ref-for-queue-a-task①">3.2. Exit Picture-in-Picture</a>
    <li><a href="#ref-for-queue-a-task②">4.4. Interface PictureInPictureWindow</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-media-readystate">
   <a href="https://html.spec.whatwg.org/multipage/media.html#dom-media-readystate">https://html.spec.whatwg.org/multipage/media.html#dom-media-readystate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-media-readystate">3.1. Request Picture-in-Picture</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-reflect">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#reflect">https://html.spec.whatwg.org/multipage/infrastructure.html#reflect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reflect">3.3. Disable Picture-in-Picture</a>
    <li><a href="#ref-for-reflect①">3.4. Auto Picture-in-Picture</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-task-source">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#task-source">https://html.spec.whatwg.org/multipage/webappapis.html#task-source</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-task-source">4.6. Task source</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-top-level-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-top-level-browsing-context">3.4. Auto Picture-in-Picture</a> <a href="#ref-for-top-level-browsing-context①">(2)</a>
    <li><a href="#ref-for-top-level-browsing-context②">3.7. Interaction with Page Visibility</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-triggered-by-user-activation">
   <a href="https://html.spec.whatwg.org/multipage/interaction.html#triggered-by-user-activation">https://html.spec.whatwg.org/multipage/interaction.html#triggered-by-user-activation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-triggered-by-user-activation">3.1. Request Picture-in-Picture</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-unloading-document-cleanup-steps">
   <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#unloading-document-cleanup-steps">https://html.spec.whatwg.org/multipage/browsing-the-web.html#unloading-document-cleanup-steps</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-unloading-document-cleanup-steps">3.2. Exit Picture-in-Picture</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-visibilitystate">
   <a href="https://www.w3.org/TR/page-visibility/#dom-visibilitystate">https://www.w3.org/TR/page-visibility/#dom-visibilitystate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilitystate">3.7. Interaction with Page Visibility</a> <a href="#ref-for-dom-visibilitystate①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-a-new-promise">
   <a href="https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise">https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-a-new-promise">4.1. Extensions to HTMLVideoElement</a>
    <li><a href="#ref-for-a-new-promise①">4.2. Extensions to Document</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-local-playback-device">
   <a href="https://w3c.github.io/remote-playback/#dfn-local-playback-device">https://w3c.github.io/remote-playback/#dfn-local-playback-device</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-local-playback-device">3.5. Interaction with Remote Playback</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-local-playback-state">
   <a href="https://w3c.github.io/remote-playback/#dfn-local-playback-state">https://w3c.github.io/remote-playback/#dfn-local-playback-state</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-local-playback-state">3.5. Interaction with Remote Playback</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-pseudo-class">
   <a href="https://drafts.csswg.org/selectors-4/#pseudo-class">https://drafts.csswg.org/selectors-4/#pseudo-class</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pseudo-class">4.7. CSS pseudo-class</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">4.5. Event types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">4.4. Interface PictureInPictureWindow</a>
    <li><a href="#ref-for-Exposed①">4.5. Event types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalidstateerror">
   <a href="https://heycam.github.io/webidl/#invalidstateerror">https://heycam.github.io/webidl/#invalidstateerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalidstateerror">3.1. Request Picture-in-Picture</a> <a href="#ref-for-invalidstateerror①">(2)</a> <a href="#ref-for-invalidstateerror②">(3)</a>
    <li><a href="#ref-for-invalidstateerror③">3.2. Exit Picture-in-Picture</a>
    <li><a href="#ref-for-invalidstateerror④">3.3. Disable Picture-in-Picture</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-NewObject">
   <a href="https://heycam.github.io/webidl/#NewObject">https://heycam.github.io/webidl/#NewObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-NewObject">4.1. Extensions to HTMLVideoElement</a>
    <li><a href="#ref-for-NewObject①">4.2. Extensions to Document</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-notallowederror">
   <a href="https://heycam.github.io/webidl/#notallowederror">https://heycam.github.io/webidl/#notallowederror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-notallowederror">3.1. Request Picture-in-Picture</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-notsupportederror">
   <a href="https://heycam.github.io/webidl/#notsupportederror">https://heycam.github.io/webidl/#notsupportederror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-notsupportederror">3.1. Request Picture-in-Picture</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SameObject">
   <a href="https://heycam.github.io/webidl/#SameObject">https://heycam.github.io/webidl/#SameObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SameObject">4.5. Event types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-securityerror">
   <a href="https://heycam.github.io/webidl/#securityerror">https://heycam.github.io/webidl/#securityerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-securityerror">3.1. Request Picture-in-Picture</a>
    <li><a href="#ref-for-securityerror①">5.1. Feature Policy</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">4.1. Extensions to HTMLVideoElement</a> <a href="#ref-for-idl-boolean①">(2)</a>
    <li><a href="#ref-for-idl-boolean②">4.2. Extensions to Document</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-long">
   <a href="https://heycam.github.io/webidl/#idl-long">https://heycam.github.io/webidl/#idl-long</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-long">4.4. Interface PictureInPictureWindow</a> <a href="#ref-for-idl-long①">(2)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-px" style="color:initial">px</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-document" style="color:initial">Document</span>
     <li><span class="dfn-paneled" id="term-for-documentorshadowroot" style="color:initial">DocumentOrShadowRoot</span>
     <li><span class="dfn-paneled" id="term-for-element" style="color:initial">Element</span>
     <li><span class="dfn-paneled" id="term-for-event" style="color:initial">Event</span>
     <li><span class="dfn-paneled" id="term-for-dictdef-eventinit" style="color:initial">EventInit</span>
     <li><span class="dfn-paneled" id="term-for-eventtarget" style="color:initial">EventTarget</span>
     <li><span class="dfn-paneled" id="term-for-dom-event-bubbles" style="color:initial">bubbles</span>
     <li><span class="dfn-paneled" id="term-for-connected" style="color:initial">connected</span>
     <li><span class="dfn-paneled" id="term-for-context-object" style="color:initial">context object</span>
     <li><span class="dfn-paneled" id="term-for-concept-document" style="color:initial">document</span>
     <li><span class="dfn-paneled" id="term-for-concept-event-fire" style="color:initial">fire an event</span>
     <li><span class="dfn-paneled" id="term-for-retarget" style="color:initial">retargeting</span>
     <li><span class="dfn-paneled" id="term-for-concept-tree" style="color:initial">tree</span>
    </ul>
   <li>
    <a data-link-type="biblio">[feature policy]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-default-allowlist" style="color:initial">default allowlist</span>
     <li><span class="dfn-paneled" id="term-for-feature-name" style="color:initial">feature name</span>
     <li><span class="dfn-paneled" id="term-for-policy-controlled-feature" style="color:initial">policy-controlled feature</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-cereactions" style="color:initial">CEReactions</span>
     <li><span class="dfn-paneled" id="term-for-eventhandler" style="color:initial">EventHandler</span>
     <li><span class="dfn-paneled" id="term-for-dom-media-have_nothing" style="color:initial">HAVE_NOTHING</span>
     <li><span class="dfn-paneled" id="term-for-htmlvideoelement" style="color:initial">HTMLVideoElement</span>
     <li><span class="dfn-paneled" id="term-for-allowed-to-use" style="color:initial">allowed to use</span>
     <li><span class="dfn-paneled" id="term-for-in-parallel" style="color:initial">in parallel</span>
     <li><span class="dfn-paneled" id="term-for-media-element-event-task-source" style="color:initial">media element event task source</span>
     <li><span class="dfn-paneled" id="term-for-dom-media-paused" style="color:initial">paused</span>
     <li><span class="dfn-paneled" id="term-for-queue-a-task" style="color:initial">queue a task</span>
     <li><span class="dfn-paneled" id="term-for-dom-media-readystate" style="color:initial">readyState</span>
     <li><span class="dfn-paneled" id="term-for-reflect" style="color:initial">reflect</span>
     <li><span class="dfn-paneled" id="term-for-task-source" style="color:initial">task source</span>
     <li><span class="dfn-paneled" id="term-for-top-level-browsing-context" style="color:initial">top-level browsing context</span>
     <li><span class="dfn-paneled" id="term-for-triggered-by-user-activation" style="color:initial">triggered by user activation</span>
     <li><span class="dfn-paneled" id="term-for-unloading-document-cleanup-steps" style="color:initial">unloading document cleanup steps</span>
    </ul>
   <li>
    <a data-link-type="biblio">[Page-Visibility]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dom-visibilitystate" style="color:initial">visibilityState</span>
    </ul>
   <li>
    <a data-link-type="biblio">[promises-guide]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-a-new-promise" style="color:initial">a new promise</span>
    </ul>
   <li>
    <a data-link-type="biblio">[Remote-Playback]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dfn-local-playback-device" style="color:initial">local playback device</span>
     <li><span class="dfn-paneled" id="term-for-dfn-local-playback-state" style="color:initial">local playback state</span>
    </ul>
   <li>
    <a data-link-type="biblio">[selectors-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-pseudo-class" style="color:initial">pseudo-class</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-invalidstateerror" style="color:initial">InvalidStateError</span>
     <li><span class="dfn-paneled" id="term-for-NewObject" style="color:initial">NewObject</span>
     <li><span class="dfn-paneled" id="term-for-notallowederror" style="color:initial">NotAllowedError</span>
     <li><span class="dfn-paneled" id="term-for-notsupportederror" style="color:initial">NotSupportedError</span>
     <li><span class="dfn-paneled" id="term-for-SameObject" style="color:initial">SameObject</span>
     <li><span class="dfn-paneled" id="term-for-securityerror" style="color:initial">SecurityError</span>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-idl-long" style="color:initial">long</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-page-visibility">[Page-Visibility]
   <dd>Jatinder Mann; Arvind Jain. <a href="https://www.w3.org/TR/page-visibility/">Page Visibility (Second Edition)</a>. 29 October 2013. REC. URL: <a href="https://www.w3.org/TR/page-visibility/">https://www.w3.org/TR/page-visibility/</a>
   <dt id="biblio-promises-guide">[PROMISES-GUIDE]
   <dd>Domenic Denicola. <a href="https://www.w3.org/2001/tag/doc/promises-guide">Writing Promise-Using Specifications</a>. 9 November 2018. TAG Finding. URL: <a href="https://www.w3.org/2001/tag/doc/promises-guide">https://www.w3.org/2001/tag/doc/promises-guide</a>
   <dt id="biblio-remote-playback">[Remote-Playback]
   <dd>Mounir Lamouri; Anton Vayvod. <a href="https://www.w3.org/TR/remote-playback/">Remote Playback API</a>. 19 October 2017. CR. URL: <a href="https://www.w3.org/TR/remote-playback/">https://www.w3.org/TR/remote-playback/</a>
   <dt id="biblio-selectors-4">[SELECTORS-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/">Selectors Level 4</a>. 21 November 2018. WD. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-fullscreen">[Fullscreen]
   <dd>Philip Jägenstedt. <a href="https://fullscreen.spec.whatwg.org/">Fullscreen API Standard</a>. Living Standard. URL: <a href="https://fullscreen.spec.whatwg.org/">https://fullscreen.spec.whatwg.org/</a>
   <dt id="biblio-mediasession">[MediaSession]
   <dd><a href="https://wicg.github.io/mediasession/">Media Session</a>. Living Standard. URL: <a href="https://wicg.github.io/mediasession/">https://wicg.github.io/mediasession/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement" id="ref-for-htmlvideoelement①①"><c- g>HTMLVideoElement</c-></a> {
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②"><c- g>NewObject</c-></a>] <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#pictureinpicturewindow" id="ref-for-pictureinpicturewindow①①"><c- n>PictureInPictureWindow</c-></a>> <a href="#dom-htmlvideoelement-requestpictureinpicture"><code><c- g>requestPictureInPicture</c-></code></a>();

  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler③"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-htmlvideoelement-onenterpictureinpicture"><code><c- g>onenterpictureinpicture</c-></code></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-htmlvideoelement-onleavepictureinpicture"><code><c- g>onleavepictureinpicture</c-></code></a>;

  [<a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions" id="ref-for-cereactions②"><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean③"><c- b>boolean</c-></a> <a data-type="boolean" href="#dom-htmlvideoelement-autopictureinpicture"><code><c- g>autoPictureInPicture</c-></code></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions" id="ref-for-cereactions①①"><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①①"><c- b>boolean</c-></a> <a data-type="boolean" href="#dom-htmlvideoelement-disablepictureinpicture"><code><c- g>disablePictureInPicture</c-></code></a>;
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①①"><c- g>Document</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②①"><c- b>boolean</c-></a> <a data-readonly data-type="boolean" href="#dom-document-pictureinpictureenabled"><code><c- g>pictureInPictureEnabled</c-></code></a>;

  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①①"><c- g>NewObject</c-></a>] <c- b>Promise</c->&lt;<c- b>void</c->> <a href="#dom-document-exitpictureinpicture"><code><c- g>exitPictureInPicture</c-></code></a>();
};

<c- b>partial</c-> <c- b>interface</c-> <c- b>mixin</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#documentorshadowroot" id="ref-for-documentorshadowroot①"><c- g>DocumentOrShadowRoot</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①"><c- n>Element</c-></a>? <a data-readonly data-type="Element?" href="#dom-documentorshadowroot-pictureinpictureelement"><code><c- g>pictureInPictureElement</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#pictureinpicturewindow"><code><c- g>PictureInPictureWindow</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget①"><c- n>EventTarget</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long②"><c- b>long</c-></a> <a data-readonly data-type="long" href="#dom-pictureinpicturewindow-width"><code><c- g>width</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long①①"><c- b>long</c-></a> <a data-readonly data-type="long" href="#dom-pictureinpicturewindow-height"><code><c- g>height</c-></code></a>;

  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-pictureinpicturewindow-onresize"><code><c- g>onresize</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#enterpictureinpictureevent"><code><c- g>EnterPictureInPictureEvent</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event①"><c- n>Event</c-></a> {
    <a href="#dom-enterpictureinpictureevent-enterpictureinpictureevent"><code><c- g>constructor</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <a href="#dom-enterpictureinpictureevent-enterpictureinpictureevent-type-eventinitdict-type"><code><c- g>type</c-></code></a>, <a class="n" data-link-type="idl-name" href="#dictdef-enterpictureinpictureeventinit" id="ref-for-dictdef-enterpictureinpictureeventinit①"><c- n>EnterPictureInPictureEventInit</c-></a> <a href="#dom-enterpictureinpictureevent-enterpictureinpictureevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code></a>);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#pictureinpicturewindow" id="ref-for-pictureinpicturewindow⑤①"><c- n>PictureInPictureWindow</c-></a> <a data-readonly data-type="PictureInPictureWindow" href="#dom-enterpictureinpictureevent-pictureinpicturewindow"><code><c- g>pictureInPictureWindow</c-></code></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-enterpictureinpictureeventinit"><code><c- g>EnterPictureInPictureEventInit</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit①"><c- n>EventInit</c-></a> {
    <c- b>required</c-> <a class="n" data-link-type="idl-name" href="#pictureinpicturewindow" id="ref-for-pictureinpicturewindow⑥①"><c- n>PictureInPictureWindow</c-></a> <a data-type="PictureInPictureWindow " href="#dom-enterpictureinpictureeventinit-pictureinpicturewindow"><code><c- g>pictureInPictureWindow</c-></code></a>;
};

</pre>
  <aside class="dfn-panel" data-for="request-picture-in-picture-algorithm">
   <b><a href="#request-picture-in-picture-algorithm">#request-picture-in-picture-algorithm</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-request-picture-in-picture-algorithm">3.4. Auto Picture-in-Picture</a> <a href="#ref-for-request-picture-in-picture-algorithm①">(2)</a>
    <li><a href="#ref-for-request-picture-in-picture-algorithm②">4.1. Extensions to HTMLVideoElement</a>
    <li><a href="#ref-for-request-picture-in-picture-algorithm③">5.1. Feature Policy</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="picture-in-picture-window">
   <b><a href="#picture-in-picture-window">#picture-in-picture-window</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-picture-in-picture-window">3.1. Request Picture-in-Picture</a>
    <li><a href="#ref-for-picture-in-picture-window①">3.2. Exit Picture-in-Picture</a>
    <li><a href="#ref-for-picture-in-picture-window②">4.1. Extensions to HTMLVideoElement</a>
    <li><a href="#ref-for-picture-in-picture-window③">4.4. Interface PictureInPictureWindow</a> <a href="#ref-for-picture-in-picture-window④">(2)</a> <a href="#ref-for-picture-in-picture-window⑤">(3)</a> <a href="#ref-for-picture-in-picture-window⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="exit-picture-in-picture-algorithm">
   <b><a href="#exit-picture-in-picture-algorithm">#exit-picture-in-picture-algorithm</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-exit-picture-in-picture-algorithm">3.2. Exit Picture-in-Picture</a> <a href="#ref-for-exit-picture-in-picture-algorithm①">(2)</a>
    <li><a href="#ref-for-exit-picture-in-picture-algorithm②">3.3. Disable Picture-in-Picture</a>
    <li><a href="#ref-for-exit-picture-in-picture-algorithm③">3.4. Auto Picture-in-Picture</a>
    <li><a href="#ref-for-exit-picture-in-picture-algorithm④">4.2. Extensions to Document</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="autopictureinpictureelement">
   <b><a href="#autopictureinpictureelement">#autopictureinpictureelement</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-autopictureinpictureelement">3.4. Auto Picture-in-Picture</a> <a href="#ref-for-autopictureinpictureelement①">(2)</a> <a href="#ref-for-autopictureinpictureelement②">(3)</a> <a href="#ref-for-autopictureinpictureelement③">(4)</a> <a href="#ref-for-autopictureinpictureelement④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-htmlvideoelement-requestpictureinpicture">
   <b><a href="#dom-htmlvideoelement-requestpictureinpicture">#dom-htmlvideoelement-requestpictureinpicture</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-htmlvideoelement-requestpictureinpicture">3.3. Disable Picture-in-Picture</a>
    <li><a href="#ref-for-dom-htmlvideoelement-requestpictureinpicture①">4.1. Extensions to HTMLVideoElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-htmlvideoelement-autopictureinpicture">
   <b><a href="#dom-htmlvideoelement-autopictureinpicture">#dom-htmlvideoelement-autopictureinpicture</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-htmlvideoelement-autopictureinpicture">3.4. Auto Picture-in-Picture</a> <a href="#ref-for-dom-htmlvideoelement-autopictureinpicture①">(2)</a> <a href="#ref-for-dom-htmlvideoelement-autopictureinpicture②">(3)</a> <a href="#ref-for-dom-htmlvideoelement-autopictureinpicture③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-htmlvideoelement-disablepictureinpicture">
   <b><a href="#dom-htmlvideoelement-disablepictureinpicture">#dom-htmlvideoelement-disablepictureinpicture</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-htmlvideoelement-disablepictureinpicture">3.1. Request Picture-in-Picture</a>
    <li><a href="#ref-for-dom-htmlvideoelement-disablepictureinpicture①">3.3. Disable Picture-in-Picture</a> <a href="#ref-for-dom-htmlvideoelement-disablepictureinpicture②">(2)</a> <a href="#ref-for-dom-htmlvideoelement-disablepictureinpicture③">(3)</a> <a href="#ref-for-dom-htmlvideoelement-disablepictureinpicture④">(4)</a>
    <li><a href="#ref-for-dom-htmlvideoelement-disablepictureinpicture⑤">3.4. Auto Picture-in-Picture</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-document-pictureinpictureenabled">
   <b><a href="#dom-document-pictureinpictureenabled">#dom-document-pictureinpictureenabled</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-document-pictureinpictureenabled">4.2. Extensions to Document</a>
    <li><a href="#ref-for-dom-document-pictureinpictureenabled①">5.1. Feature Policy</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-document-exitpictureinpicture">
   <b><a href="#dom-document-exitpictureinpicture">#dom-document-exitpictureinpicture</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-document-exitpictureinpicture">4.2. Extensions to Document</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="picture-in-picture-support">
   <b><a href="#picture-in-picture-support">#picture-in-picture-support</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-picture-in-picture-support">3.1. Request Picture-in-Picture</a>
    <li><a href="#ref-for-picture-in-picture-support①">4.2. Extensions to Document</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-documentorshadowroot-pictureinpictureelement">
   <b><a href="#dom-documentorshadowroot-pictureinpictureelement">#dom-documentorshadowroot-pictureinpictureelement</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement">3.1. Request Picture-in-Picture</a> <a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement①">(2)</a> <a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement②">(3)</a>
    <li><a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement③">3.2. Exit Picture-in-Picture</a> <a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement④">(2)</a> <a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement⑤">(3)</a>
    <li><a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement⑥">3.3. Disable Picture-in-Picture</a>
    <li><a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement⑦">3.4. Auto Picture-in-Picture</a> <a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement⑧">(2)</a>
    <li><a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement⑨">3.7. Interaction with Page Visibility</a>
    <li><a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement①⓪">4.1. Extensions to HTMLVideoElement</a> <a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement①①">(2)</a>
    <li><a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement①②">4.3. Extension to DocumentOrShadowRoot</a>
    <li><a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement①③">4.4. Interface PictureInPictureWindow</a> <a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement①④">(2)</a> <a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement①⑤">(3)</a> <a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement①⑥">(4)</a>
    <li><a href="#ref-for-dom-documentorshadowroot-pictureinpictureelement①⑦">4.7. CSS pseudo-class</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="pictureinpicturewindow">
   <b><a href="#pictureinpicturewindow">#pictureinpicturewindow</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pictureinpicturewindow">3.1. Request Picture-in-Picture</a>
    <li><a href="#ref-for-pictureinpicturewindow①">4.1. Extensions to HTMLVideoElement</a>
    <li><a href="#ref-for-pictureinpicturewindow②">4.4. Interface PictureInPictureWindow</a> <a href="#ref-for-pictureinpicturewindow③">(2)</a> <a href="#ref-for-pictureinpicturewindow④">(3)</a>
    <li><a href="#ref-for-pictureinpicturewindow⑤">4.5. Event types</a> <a href="#ref-for-pictureinpicturewindow⑥">(2)</a> <a href="#ref-for-pictureinpicturewindow⑦">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-pictureinpicturewindow-width">
   <b><a href="#dom-pictureinpicturewindow-width">#dom-pictureinpicturewindow-width</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-pictureinpicturewindow-width">4.4. Interface PictureInPictureWindow</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-pictureinpicturewindow-height">
   <b><a href="#dom-pictureinpicturewindow-height">#dom-pictureinpicturewindow-height</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-pictureinpicturewindow-height">4.4. Interface PictureInPictureWindow</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="close-window-algorithm">
   <b><a href="#close-window-algorithm">#close-window-algorithm</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-close-window-algorithm">3.2. Exit Picture-in-Picture</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="eventdef-htmlvideoelement-enterpictureinpicture">
   <b><a href="#eventdef-htmlvideoelement-enterpictureinpicture">#eventdef-htmlvideoelement-enterpictureinpicture</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventdef-htmlvideoelement-enterpictureinpicture">3.1. Request Picture-in-Picture</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enterpictureinpictureevent">
   <b><a href="#enterpictureinpictureevent">#enterpictureinpictureevent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enterpictureinpictureevent">3.1. Request Picture-in-Picture</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-enterpictureinpictureevent-pictureinpicturewindow">
   <b><a href="#dom-enterpictureinpictureevent-pictureinpicturewindow">#dom-enterpictureinpictureevent-pictureinpicturewindow</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-enterpictureinpictureevent-pictureinpicturewindow">3.1. Request Picture-in-Picture</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-enterpictureinpictureeventinit">
   <b><a href="#dictdef-enterpictureinpictureeventinit">#dictdef-enterpictureinpictureeventinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-enterpictureinpictureeventinit">4.5. Event types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="eventdef-htmlvideoelement-leavepictureinpicture">
   <b><a href="#eventdef-htmlvideoelement-leavepictureinpicture">#eventdef-htmlvideoelement-leavepictureinpicture</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventdef-htmlvideoelement-leavepictureinpicture">3.2. Exit Picture-in-Picture</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="eventdef-pictureinpicturewindow-resize">
   <b><a href="#eventdef-pictureinpicturewindow-resize">#eventdef-pictureinpicturewindow-resize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventdef-pictureinpicturewindow-resize">4.4. Interface PictureInPictureWindow</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>